<!DOCTYPE html>
<html lang="en">

<head>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/Vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/frontstage.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1320167_tr6up9ah8d.css">
    <link rel="stylesheet" type="text/css" href="/css/audio.css">
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
    <div id="singerinfo">
        <div class="topbar">
            <h1 class="theme">
                <img  class="logo" src="/imgs/logo.png">
            </h1>
            <ul class="theme">
                <li class="menu">
                    <a href="/">发现音乐</a>
                </li>
                <li class="menu">
                    <a :href="'/userInfo?id='+ userData.id" v-if="userData != null">我的音乐</a>
                    <a v-else @click="loginshow = true">我的音乐</a>
                </li>
            </ul>
            
            <div class="login fr" >
                <el-dropdown v-if="userData == null">
                    <img class="user-avatar" src="/imgs/头像.png">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" @click="loginshow=true">登录</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="registershow=true">注册</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown v-else>
                    <img class="user-avatar" :src="userData.picture.resourcePath">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" :href="'/userInfo?id='+ userData.id">个人主页</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="exit">退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        
            <div class="search fr">	
                <div class="left_park_side"></div>
                <div class="right_park_side"></div>
                <form action="#" target="#">
                    <div class="searchbody">
                        <input type="text" name="keyword"  placeholder="张敬轩"/>
                    </div>
                    <button type="submit">
                        <i class="el-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="singerinfo">
            <div class="singer-introduction">
                <div class="name">{{singerdata.chinesename}}</div>
                <!-- <el-button href="" class="singer-btn" icon="el-icon-folder-add" plain>收藏</el-button> -->
                <img :src="picsrc" />
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="热门作品" name="first">
                    <div class="singersong-table">
                        <el-table :data="songdata" style="width: 100%;margin-top:20px">
                            <el-table-column fixed prop="id" label width="48"></el-table-column>
                            <el-table-column label="标题">
                            <template slot-scope="scope">
                                <span>{{scope.row.name}}</span>
                                <a :href="'/songPlay?id='+scope.row.id" target="_blank"><i class="el-icon-video-play"></i></a>
                            </template>
                            </el-table-column>
                            <el-table-column prop="duration" label="时长" width="120"></el-table-column>
                            <!-- <el-table-column prop="albums[0].name" label="所属专辑" width="120"></el-table-column> -->
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="所有专辑" name="second">
                    <div class="singeralbum-table">
                        <el-row v-for="(row, index) in rows1" :key="index" :gutter="20">
                            <el-col :span="6" v-for="item of row" :key="item.id">
	                            <div class="album-item">
	                                <a :href="'/albumInfo?id='+item.id" target="_blank">
		                                <img class="album-mask" src="/imgs/album.png">
		                                <img class="album-img" :src="item.picture.resourcePath"/>
	                                </a>
	                                <a class="album-name" :href="'/albumInfo?id='+item.id" target="_blank">{{item.name}}</a>
	                                <span>{{item.publishTime}}</span>
	                            </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="相关MV" name="third">
                    <div class="singermv-table">
                        <el-row v-for="(row, index) in rows" :key="index" :gutter="30">
                            <el-col :span="6" v-for="item of row" :key="item.id">
	                            <div class="mv-item">
	                                <a :href="'/mvPlay?id='+item.mv.id" target="_blank">
	                                    <img :src="item.mv.picture.resourcePath">
	                                    <i class="el-icon-video-play"></i>
	                                </a>
	                                <span>{{item.name}}</span>
	                            </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="艺人介绍" name="fourth">
                    <div class="singerintro-title">
                        <span class="pillar"></span>
                        <span>{{ singerdata.chinesename }}简介</span>
                    </div>
                    <div class="singerintro-content">{{singerdata.introduction}}
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <my-footer></my-footer>
    </div>

<script type="module"  th:inline="javascript">
var singer = [[${singer}]]
var user = [[${user}]]
var path = singer.picture.resourcePath;
var resource = path.slice(0,path.lastIndexOf('.')) + "-info.jpg";
var songs = [[${songs}]]
console.log(songs)
var mvplay = new Vue({
    el: '#singerinfo',
    data() {
        return {
            singerdata: singer,
			activeName: 'first',
            tableData: [],
            picsrc: resource,
            userData: user,
			songdata: songs
        }
    },
	methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        exit(){
            $.ajax({
                url: "/logout",
                type: "post",
                contentType: "application/json",
                async: false,
                success(data) {
                    window.location.href = "/";
                }
            });
        }
    },
    components: {
        'my-footer': httpVueLoader('./vue/footer.vue'),
    },
	computed: {
    	rows() {
      		const rows = [];
      		this.singerdata.songs.forEach((item, index) => {
        		const row = Math.floor(index / 4)
        		if (!rows[row]) {
          		rows[row] = []
        		}
        		rows[row].push(item)
      		})
      		return rows
    	},
		rows1() {
      		const rows = [];
      		this.singerdata.albums.forEach((item, index) => {
        		const row = Math.floor(index / 4)
        		if (!rows[row]) {
          		rows[row] = []
        		}
        		rows[row].push(item)
      		})
      		return rows
    	}
   },
})
</script>

</body>
</html>